<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
    padding: 0;
    margin: 0;
}

ul, li {
    list-style: none;
}

#ad {
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    
    position: relative;
}

#ad > .imgs {
    width: 100%;
    height: 100%;
    
    position: relative;
}

#ad > .imgs > li {
    width: 100%;
    height: 100%;
    
    position: absolute;
    left: 0;
    top: 0;
}

#ad > .imgs > li > img {
    width: 100%;
    height: 100%;
}

#ad > .pre_next {
    width: 100%;
    height: 100px;
    
    position: absolute;
    left: 0;
    top: 200px;
    
    display: none;
}

#ad > .pre_next > li {
    background-color: gray;
    width: 50px;
    height: 100px;
    float: left;
    
    font-size: 50px;
    
    line-height: 100px;
    text-align: center;
    
    cursor: pointer;
}

#ad > .pre_next > li:nth-child(2) {
    float: right;
}

#ad > .indicator {
    position: absolute;
    left: 380px;
    bottom: 0;
    
    background-color: gray;
    border-radius: 20px;
}

#ad > .indicator > li {
    width: 30px;
    height: 30px;
    float: left;
    border-radius: 50%;
    background-color: white;
    margin: 5px;
    
    text-align: center;
    line-height: 30px;
}

#ad > .indicator > li:nth-child(1) {
    background-color: red;
}
</style>
</head>
<body>
<div id="ad">
    
    <ul class="imgs">
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
        <li><img src="6.jpg" alt=""></li>
    </ul>
    
    <ul class="pre_next">
        <li>&lt;</li>
        <li>&gt;</li>
    </ul>
    <ul class="indicator">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

</div>
<script>
var ad = document.querySelector("#ad");

var imgs = document.querySelectorAll("#ad > .imgs > li");
var preAndNext = document.querySelector("#ad > .pre_next");   // ul
var indicators = document.querySelectorAll("#ad > .indicator > li");

/**
 * 一些初始化的工作
 */
function init(){
    for (var img of imgs){
        img.style.opacity = 0;
    }
    imgs[0].style.opacity = 1;

    ad.onmouseenter = function (){
        clearTimeout(autoPlayId);//给整个ad添加事件,当鼠标上来的时候, 让自动播放停止
        preAndNext.style.display = "block";
        preAndNext.firstElementChild.style.opacity = 0.6;
        preAndNext.lastElementChild.style.opacity = 0.6;
    }
    ad.onmouseleave = function (){
        autoPlay(); //鼠标离开的时候开启自动播放
        preAndNext.style.display = "none";
    }

    // 上一个, 下一个的鼠标事件
    preAndNext.firstElementChild.onmouseenter = function (){
        this.style.opacity = 1;
    }
    preAndNext.firstElementChild.onmouseleave = function (){
        this.style.opacity = 0.6;
    }
    preAndNext.lastElementChild.onmouseenter = function (){
        this.style.opacity = 1;
    }
    preAndNext.lastElementChild.onmouseleave = function (){
        this.style.opacity = 0.6;
    }

    preAndNext.firstElementChild.onclick = function (){
        indicators[showIndex % imgs.length].style.backgroundColor = "white";  // 把上一个指示器设置为白色
        var preIndex = showIndex - 1 + imgs.length;
        move(showIndex, preIndex);
        showIndex = preIndex;
        indicators[showIndex % imgs.length].style.backgroundColor = "red";    // 把当前正在显示的指示器设置为红

    }
    preAndNext.lastElementChild.onclick = function (){
        indicators[showIndex % imgs.length].style.backgroundColor = "white";  // 把上一个指示器设置为白色
        move(showIndex, showIndex + 1);
        showIndex++;
        indicators[showIndex % imgs.length].style.backgroundColor = "red";    // 把当前正在显示的指示器设置为红
    }

    //给指示器添加mouse事件
    for (let i = 0; i < indicators.length; i++){
        indicators[i].onmouseenter = function (){
            move(showIndex, i);

            indicators[showIndex % imgs.length].style.backgroundColor = "white";
            indicators[i].style.backgroundColor = "red";
            showIndex = i;
        }
    }
}

init();

/**
 * 调用一次从一张图片运到另一张图片, 中间有过渡
 */
function move(showIndex, nextIndex){
    setTimeout(function step(){
        imgs[showIndex % imgs.length].style.opacity -= 0.05
        imgs[nextIndex % imgs.length].style.opacity
            = +imgs[nextIndex % imgs.length].style.opacity + 0.05

        if (imgs[showIndex % imgs.length].style.opacity <= 0 || imgs[nextIndex % imgs.length].style.opacity >= 1) return;
        setTimeout(step, 10)
    }, 0)
}

/**
 * 自动播放
 */
var showIndex = 0;  //当前正在显示的图片的下标
var autoPlayId; // 自动播放时定时器的id
function autoPlay(){
    autoPlayId = setTimeout(function step(){
        indicators[showIndex % imgs.length].style.backgroundColor = "white";  // 把上一个指示器设置为白色
        move(showIndex, showIndex + 1);    // 开始切换图片
        showIndex++;    // 指示器下标++
        if (showIndex == imgs.length) showIndex = 0;    // 如果指示器的下标越界,重新从0开始
        indicators[showIndex % imgs.length].style.backgroundColor = "red";    // 把当前正在显示的指示器设置为红色
        autoPlayId = setTimeout(step, 2000)
    }, 1600)
}

autoPlay();
</script>
</body>
</html>